@import "default";

.buyticket {
  background: #fff;
  width: 100%;
  padding-bottom: 58px;
  .whole-detail-info-wrapper {
    background: #fff;
    width: 1160px;
    margin: auto;
    display: flex;
    .detail-img-icon {
      margin-right: 20px;
      background-image: url();
      width: 300px;
      height: 400px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 50%), 0 4px 8px 0 rgb(0 0 0 / 40%);
      border-radius: 4px;
    }
    .detail-info-wrapper {
      width: 840px;
      .product-info-name {
        display: flex;
        align-items: flex-start;
        font-size: 18px;
        .title {
          display: inline-block;
          width: 750px;
        }
      }
      .product-info-time-wrapper {
        margin-top: 30px;
        display: flex;
        align-items: center;
        .product-info-time--title {
          font-size: 14px;
          color: #99a2aa;
          line-height: 14px;
          margin-right: 15px;
        }
        .product-info-time {
          font-size: 14px;
          color: #222;
          line-height: 14px;
        }
      }
      .vuene-wrapper {
        padding-bottom: 8px;
        margin-top: 10px;
        align-items: center;
        display: flex;
        border-bottom: 1px dashed #e7ecf1;
        .title {
          line-height: 38px;
          font-size: 14px;
          color: #99a2aa;
          margin-right: 15px;
        }
        .vuene-info-content {
          display: flex;
          align-items: center;
          .vuene-name {
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 430px;
          }
          .address-name {
            margin-right: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 10px;
            font-size: 12px;
            color: #99a2aa;
            line-height: 14px;
            max-width: 250px;
          }
          .address-icon {
            margin-left: 15px;
            margin-right: 5px;
            width: 15px;
            height: 15px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url();
          }
          .check-map {
            cursor: pointer;
            font-size: 12px;
            color: #6d757a;
            line-height: 14px;
          }
        }
      }
      .login-show-wrapper {
        .mr4 {
          margin-top: 14px;
        }
        .clearfix {
          margin-top: 10px;
          display: flex;
          &:after {
            display: block;
            visibility: hidden;
            font-size: 0;
            clear: both;
            width: 0;
            height: 0;
            content: ".";
          }
          .title {
            line-height: 38px;
            font-size: 14px;
            color: #99a2aa;
            margin-right: 15px;
            
            }
            .screens {
                .selectable-option {
                  display: inline-block;
                  position: relative;
                  height: 38px;
                  line-height: 38px;
                  text-align: center;
                  margin-right: 10px;
                  margin-bottom: 10px;
                  padding: 0 30px;
                  border: 1px solid #ccd0d7;
                  border-radius: 4px;
                  -webkit-user-select: none;
                  user-select: none;
                  cursor: pointer;
                }
                .active {
                  height: 38px;
                  line-height: 38px;
                  color: #f25d8e;
                  border: 1px solid #f25d8e;
                  box-shadow: inset 0 0 0 1px #f25d8e;
                  &:after {
                    position: absolute;
                    content: "";
                    font-size: 0;
                    width: 0;
                    height: 0;
                    bottom: 0;
                    right: 0;
                    border-style: solid;
                    border-width: 0 0 18px 18px;
                    border-color: transparent transparent #f25d8e;
                  }
                  &:before {
                    display: inline-block;
                    position: absolute;
                    content: "";
                    font-size: 0;
                    line-height: 0;
                    width: 6px;
                    height: 4px;
                    right: 1px;
                    bottom: 3px;
                    border: 1px solid #fff;
                    border-width: 0 0 2px 2px;
                    transform: rotate(-43deg);
                    z-index: 10;
                  }
                }
          }
          .tickets {
            flex: 1 1;
            .selectable-option {
              display: inline-block;
              position: relative;
              height: 38px;
              line-height: 38px;
              text-align: center;
              margin-right: 10px;
              margin-bottom: 10px;
              padding: 0 30px;
              border: 1px solid #ccd0d7;
              border-radius: 4px;
              -webkit-user-select: none;
              user-select: none;
              cursor: pointer;
            }
            .active {
              height: 38px;
              line-height: 38px;
              color: #f25d8e;
              border: 1px solid #f25d8e;
              box-shadow: inset 0 0 0 1px #f25d8e;
              &:after {
                position: absolute;
                content: "";
                font-size: 0;
                width: 0;
                height: 0;
                bottom: 0;
                right: 0;
                border-style: solid;
                border-width: 0 0 18px 18px;
                border-color: transparent transparent #f25d8e;
              }
              &:before {
                display: inline-block;
                position: absolute;
                content: "";
                font-size: 0;
                line-height: 0;
                width: 6px;
                height: 4px;
                right: 1px;
                bottom: 3px;
                border: 1px solid #fff;
                border-width: 0 0 2px 2px;
                transform: rotate(-43deg);
                z-index: 10;
              }
            }
          }
          .num-content {
            display: flex;
            .ticket-count {
              display: flex;
              align-items: center;
              height: 38px;
              border-radius: 3px;
              border: 1px solid #ccd0d7;
              width: 158px;
              line-height: 38px;
              .count-reduce {
                margin-left: 13px;
                width: 14px;
                height: 14px;
                cursor: pointer;
                border-top-left-radius: 0.133rem;
                border-bottom-left-radius: 0.133rem;
                &:before {
                  position: absolute;
                  content: "";
                  font-size: 0;
                  width: 14px;
                  height: 14px;
                  background: url()
                    50% no-repeat;
                  background-size: contain;
                }
              }

              .count-number {
                flex: 1 1;
                width: 1.44rem;
                height: 1.013rem;
                line-height: 1.013rem;
                left: 1.013rem;
                text-align: center;
              }
              .count-plus {
                margin-right: 13px;
                position: relative;
                right: 0;
                border-top-right-radius: 0.133rem;
                border-bottom-right-radius: 0.133rem;
                width: 14px;
                height: 14px;
                cursor: pointer;
                &:after {
                  position: absolute;
                  content: "";
                  font-size: 0;
                  top: 0;
                  left: 0;
                  width: 14px;
                  height: 14px;
                  background: url()
                    50% no-repeat;
                  background-size: contain;
                }
              }
              .active:after {
                background: url()
                  50% no-repeat;
                background-size: 100%;
              }
              .active:before {
                background: url()
                  50% no-repeat;
                background-size: 100%;
              }
            }
          }
        }
        .supplement {
          margin-top: 20px;
          .express-info {
            margin-left: 60px;
            display: inline-block;
            .icon-small-circle {
              display: inline-block;
              vertical-align: middle;
              background-image: url();
              background-size: 100% 100%;
              height: 4px;
              width: 4px;
            }
            span {
              vertical-align: middle;
              font-size: 12px;
              color: #999;
            }
          }
          .refund-info {
            margin-left: 40px;
            display: inline-block;
            cursor: pointer;
            .icon-small-circle {
              display: inline-block;
              vertical-align: middle;
              background-image: url();
              background-size: 100% 100%;
              height: 4px;
              width: 4px;
            }
            span {
              vertical-align: middle;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .product-buy-wrapper {
          margin-left: 57px;
          margin-top: 30px;
          display: flex;
          .product-buy {
            width: 240px;
            height: 50px;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
            border-radius: 3px;
            cursor: pointer;
            background: #e4eaef;
            color: #99a2aa;
          }
          .enable {
            color: #fff;
            background-image: linear-gradient(-48deg, #ff6a9c, #fe8574);
            box-shadow: 0 3px 4px 0 #fdb8cc;
          }
        }
      }
    }
  }
}

.activity-info {
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
  background: #fff;
  cursor: auto;
  width: 850px;
  padding: 20px;
  margin-top: 10px;
  margin: 0 auto;
  border: 1px solid #e7ecf1;
  border-radius: 4px;
  box-sizing: border-box;
  p {
    img {
      max-width: 788px;
      height: auto;
      background-size: 100% 100%;
      margin: 20px 0;
    }
  }
}
